<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }
        ul{
            /* 将目标元素转化为弹性盒 内部的一级标签统称为弹性项 */
            display: flex; 
            list-style: none;
            padding: 0;
            margin: 0;
            height: 400px;
            border: 1px solid #333;
            /* 定义弹性布局的主轴方向 默认值是row表示弹性项横向排列 column表示弹性项纵向排列
            column-reverse 表示纵向倒序 row-reverse 表示横向倒序
             */
            flex-direction: row;
            /* 定义主轴方向上的排列方式 
            flex-start 从左边开始位置排列
            flex-end 从尾部开始排列
            center沿主轴方向居中
            space-between 沿主轴方向两边对齐中间留白
            space-around 弹性项中间的空白是弹性盒两边的2倍
            */
            justify-content: space-around;
            /* 
            主轴的交叉轴方向的对齐方式
            flex-start 沿交叉轴的首部对齐 默认值
            flex-end 沿交叉轴的尾部对齐
            center 居中对齐
            stretch 拉伸的意思
            baseline 基线对齐 基线是一行文字的底部
            对单行有用
             */
            /* align-items: center; */
            /* flex-wrap 
            定义换行方式 默认值是nowrap表示不换行
            wrap换行
            warp-reverse倒转顺序换行
             */
            flex-wrap: wrap;
            /* 多行时主轴的交叉轴方向上的对齐方式 */
            align-content: flex-start;
            /* flex: 1
            flex是flex-basis flex-grow flex-shrink的集合;
             */


             
        }
        /* flex-basis 定义弹性项在主轴方向上的扩展距离*/
        li{
            background-color: red;
            flex-basis: 300px; 
            flex-grow: 0;
            /* 定义弹性项的缩小比例 */
            flex-shrink: 0; 
            order: 2;
        }
        li:nth-child(2) {
            background-color: blue;
        }
        li:nth-child(3) {
            background-color: green;
            /* flex-grow 定义弹性项的放大比例 */
            /* flex-grow: 1; */
            flex-shrink: 1;
            /* 给弹性项设置序号 序号最小的在最前面排列 */
            order: 1;
        }
        li:nth-child(4) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ul>
    <script>
        // var str = '你是个麻瓜'
        // console.log(str.split(''))
        // var a = str.split('').reverse().join('')
        // console.log(a)
    </script>
</body>
</html>